<template>
    <div class="pvToday">
        <h3 class="title">当日使用量|人次</h3>
        <p class="bar">
            <span></span>
            <span>96121</span>
        </p>
        <div class="chartBox">
            <div class="grid"></div>
            <div class="chart" id="historyChart"></div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            option:{
                tooltip : {
                    trigger: 'axis',
                    axisPointer : { // 坐标轴指示器，坐标轴触发有效
                        type : 'line'// 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend:{
                    data:['96121','气象网'],
                    textStyle:{
                        color: '#00FFFF'
                    },
                    right:'0',
                    top:'0',  
                    itemWidth:10,
                    itemHeight:10    
                },
                grid:{
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    top:'10%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['天河','越秀','荔湾','海珠','白云','花都','番禺'],
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#00FFFF',
                            }
                        },
                        axisLabel: {
                            color: '#00FFFF'
                        },
                        axisTick: {
                            show:false,
                        },
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#00FFFF',
                            }
                        },
                        axisLabel: {
                            color: '#00FFFF'
                        },
                        axisTick: {
                            show:false,
                        },
                    }
                ],
                series : [
                   {
                        type: 'bar',
                        barWidth: 18,
                        itemStyle:{
                            normal:{
                                color:new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#FF9200'
                                }, {
                                    offset: 0.3,
                                    color: 'rgba(255, 146, 0, 0.7)'
                                }, {
                                    offset: 0.6,
                                    color: 'rgba(255, 146, 0, 0.4)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(255, 146, 0, 0.1)'
                                }], false)
                            }
                        },
                        data: [254, 3254, 1654, 2454, 4757, 2011, 1211]
                   }
                ]
            }
        }
    },
    methods:{
        init(){
            var historyChart = document.getElementById('historyChart')
            let fsize = document.body.clientWidth/1920*16            
            historyChart.style.height =document.body.clientWidth<=1920? fsize*13+'px':'13rem'
            var myChart = this.$echarts.init(historyChart); 
            myChart.setOption(this.option)
        }
    },
    mounted(){
        this.init()
    }
}
</script>

<style lang="scss" scoped>
    .pvToday{//当日访问量
        padding:.3rem .4rem 0 1.8rem;
        display:flex;
        flex-direction: column;
        position: relative;
        .title{
            line-height:2.8rem;
            letter-spacing: .2rem;
            font-size:1.2rem;
            text-align:left;
            height:2.8rem;
            color: #00FFFF;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
        }
        .bar{
            position:absolute;
            right:2.5rem; 
            top:1rem;
            span{
                &:nth-of-type(1){
                    display:inline-block;
                    width:1rem;
                    height:.7rem;
                    border-radius: 10%;
                    background: linear-gradient(#00FFFF, #052B3F);
                }
                &:nth-of-type(2){
                    color: #FFFFFF;
                    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
                }
            }
        }
        .chartBox{
            height:13rem;
            position: relative;
            .grid{
                position:absolute;
                bottom:2rem;
                left:4rem;
                width:80%;
                height:3rem;
                background-image: url('../../../../static/images/commonServer/ground.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                opacity: 0.6;
            }
            .chart{
                width:100%;
            }
        }
    }
</style>